<template class="body">
    <NuxtLayout name="header" />
    <div class="MyPageLayout">
        <div class="layout_magin">

            <a-layout>
                <div>
                    <a-layout-sider style="background-color: #FFF;" width="260" class="sider_layout_main">
                        <div class="sider_layout_All_One">
                            MY PAGE
                            <div v-for="item in 5" class="sider_layout_list">
                                <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35"
                                    fill="none">
                                    <circle cx="17.5" cy="17.5" r="17" fill="#D9D9D9" stroke="#777777" />
                                </svg>

                                <div style="margin-left: 13px;">구독현황</div>
                            </div>
                        </div>
                    </a-layout-sider>
                    <a-layout-sider style="background-color: #FFF;height: 170px;flex:0 !important;" width="260"

                        class="sider_layout_main">
                        <div class="sider_layout_All">
                            <div class="sider_layout_All_text">FROFILE</div>
                            <div style="display: flex; flex-direction: row;align-items: center;">
                                <img src="~/assets/images/myPage/my_pagae_frofile.png" id="myImage" />
                                <div class="sider_layout_All_Column">
                                    <text
                                        style="color: #000;font-size: 18px;font-weight: 500;line-height: normal;margin-bottom: 6px;">James
                                        Sullivan Reece</text>
                                    <text
                                        style="color: #000;font-size: 14px;font-weight: 500;line-height: normal;">james@inca.co.kr</text>
                                </div>
                            </div>
                        </div>
                    </a-layout-sider>

                    <div style="background-color: #FFF;" class="sider_layout_main">
                        <div
                            style="padding: 16px 99px; color: #777;text-align: center;font-family: Pretendard;font-size: 15px;font-style: normal;font-weight: 500;line-height: normal;">
                            로그아웃
                        </div>
                    </div>
                </div>
                <a-layout>

                    <a-layout style="padding: 0 24px 24px">

                        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '737px' }">
                            <a-breadcrumb style="margin: 16px 0">
                                <a-breadcrumb-item>Home</a-breadcrumb-item>
                                <a-breadcrumb-item>List</a-breadcrumb-item>
                                <a-breadcrumb-item>App</a-breadcrumb-item>
                            </a-breadcrumb>
                        </a-layout-content>
                    </a-layout>
                </a-layout>
            </a-layout>


        </div>

    </div>
</template>


<script lang="ts" >

</script>


<style lang="scss">
body {
    background-color: #f5f5f5;
    /* 设置背景色 */
}

#myImage {
    width: 45px;
    height: 50px;
}

.MyPageLayout {
    width: 1200px;
    margin: 0 auto;

}

.layoutCss {
    padding: 32px 30px 0px 32px;
}

.siderStyle_Left {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: 14.7px 0px 0px 18px;
}

.icon_siderStyle_Left {
    margin: 31.54px 0px 0px 11px;
}

.layout_magin {
    margin: 32px 30px 0px 30px;

}



.sider_layout_main {

    border-radius: 15px;
    border: 1px solid #F0F0F0;
    margin-bottom: 24px;
}

.sider_layout_All_One {
    padding: 14.7px 0px 31px 18px;
}

.sider_layout_All {
    padding: 17px 0px 0px 16px;
}

.sider_layout_All_text {
    color: #000;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 15px;
}

.sider_layout_All_Column {
    display: flex;
    flex-direction: column;
    margin-left: 11.86px;

}

.sider_layout_list {
    display: flex;
    flex-direction: row;
    padding: 31px 100px 0px 29px;
    align-items: center;
}

.icon_sider_layout {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #D9D9D9;

}
</style>